<!--
 * @Author: zy
 * @Date: 2022-06-09 16:24:45
 * @LastEditTime: 2022-07-27 10:19:00
 * @Description: 快速生成分享海报 生成海报后自动上传服务器保存
-->
<template>
  <view>
    <!-- 悬浮分享按钮 -->
    <view class="share-btn" @click="onShareBtn">
      <image class="img"
        src="">
      </image>
    </view>

    <!-- 分享类型 -->
    <u-popup :show="showShareType" mode="bottom" :round="10" @close="onShareClose">
      <view class="share-type">
        <view class="title-box">
          <text class="title">分享</text>
        </view>
        <view class="d-flex justify-content-around">
          <view class="btn-item" @click="onSharePoster">
            <u-icon name="moments-circel-fill" color="#07C160" size="44" />
            <text class="btn-item-text">分享到朋友圈</text>
          </view>
          <!-- #ifdef H5 -->
          <view class="btn-item" @click="onSharePublicH5">
            <u-icon name="weixin-circle-fill" color="#00C800" size="44" />
            <text class="btn-item-text">发送给好友</text>
          </view>
          <!-- #endif -->
          <!-- #ifndef H5 -->
          <button type="none" open-type="share">
            <view class="btn-item">
              <u-icon name="weixin-circle-fill" color="#00C800" size="44" />
              <text class="btn-item-text">发送给好友</text>
            </view>
          </button>
          <!-- #endif -->
        </view>
      </view>
    </u-popup>

    <!-- h5网页分享弹框 -->
    <u-overlay :show="showSharePublicH5" @click="closeSharePublicH5">
      <view class="share-image-box">
        <image
          src="" />
      </view>
      <view class="share-text-box">
        <text>点击右上角 · · ·</text>
        <text>选择发送给朋友 / 分享到朋友圈</text>
      </view>
    </u-overlay>


    <!-- 海报 -->
    <!-- #ifdef H5 -->
    <l-painter ref="canvasCustom" isH5PathToBase64 @fail="onCreatePosterError" :file-type="fileType"
      :isRenderImage="true" @success="onRenderImage" custom-style="position: fixed; left: 200%;" :width="posterWidth"
      :height="posterHeight" />
    <!-- #endif -->
    <!-- #ifndef H5 -->
    <l-painter ref="canvasCustom" @fail="onCreatePosterError" :file-type="fileType" :isRenderImage="true"
      @success="onRenderImage" custom-style="position: fixed; left: 200%;" :width="posterWidth"
      :height="posterHeight" />
    <!-- #endif -->

  </view>
</template>

<script>
  import {
    bucketSn
  } from '@/config'

  export default {
    props: {
      posterData: Object,
      start: {
        type: Boolean,
        Default: false
      },
    },
    data() {
      return {
        showShareType: false,
        showSharePublicH5: false,
        posterUrl: null,

        fileType: 'jpg',
        posterWidth: 750,
        posterHeight: 1020,
        hash: ""
      }
    },
    watch: {
      posterData: {
        handler(newV, oldV) {
          if (newV.start == true) {
            this.startPoster()
          }
        },
        deep: true
      }
    },
    methods: {
      onShareClose() {
        this.showShareType = false;
      },
      onShareBtn() {
        this.showShareType = true;
      },
      onSharePoster() {
        console.log("开始生成分享海报")
        this.$emit('onSharePoster')
      },
      startPoster() {
        console.log("开始绘制")
        this.showShareType = false;
        uni.showLoading({
          title: '请稍等...',
          mask: true,
        })
        const p = this.$refs.canvasCustom
        p.render(this.posterData)

        //超时响应 自动停止
        setTimeout(async () => {
          if (!this.posterUrl) {
            this.onCreatePosterError();
          }
        }, 6000)
      },
      onRenderImage(path) {
        this.hash = Math.ceil(Math.random() * 100000);
        //接收海报数据
        this.onCreatePosterSuccess(path, this.hash)
      },
      async onCreatePosterSuccess(file, hash) {
        uni.hideLoading()
        //海报已生成 上传至服务器存储
        const file_url = await this.$api.autoUploadQiniu(this.fileType, 'uni/xcx/poster/' + hash, bucketSn, file);
        this.posterUrl = file_url
        this.$emit('posterUrlSuccess', this.posterUrl)
      },
      onCreatePosterError() {
        this.$xf.toast('海报生成失败')
        uni.hideLoading()
      },
      //分享右上角弹框
      onSharePublicH5() {
        this.showSharePublicH5 = true;
      },
      closeSharePublicH5() {
        this.showSharePublicH5 = false;
      }
    }
  }

</script>

<style scoped lang="scss">
  .share-btn {
    position: fixed;
    right: 30rpx;
    bottom: calc(env(safe-area-inset-bottom) + 180rpx);
    z-index: 99;
    width: 80rpx;
    height: 80rpx;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    .img {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .share-type {
    background-color: rgba(#FFFFFF, 0.9);
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    padding-bottom: env(safe-area-inset-bottom);


    .title-box {
      display: flex !important;
      justify-content: center !important;

      padding-top: 30rpx;
      line-height: 44rpx;

      .title {
        font-size: 32rpx;
        color: #1C1D22;
        font-weight: bold;
      }
    }

    .btn-item {
      display: flex !important;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 20rpx;
    }

    .btn-moments {
      color: #07C160;
    }

    .btn-item-text {
      font-size: 24rpx;
      color: #79797D;
      line-height: 32rpx;
      margin-top: 10rpx;
    }
  }

  .share-image-box {
    image {
      float: right;
      width: 100rpx;
      height: 100rpx;
      opacity: 1;
      margin-right: 40rpx;
      margin-top: 20rpx;
    }
  }

  .share-text-box {
    text {
      margin-top: 10rpx;
      font-size: 28rpx;
      float: right;
      clear: both;
      width: 400rpx;
      color: #fff;
      margin-right: 40rpx;
    }
  }

</style>
